<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信-子传父(自定义事件)</title>
</head>
<body>
    <div id="app">
        <cpn v-on:itemclick ="cpnClick"></cpn>
    </div>
</body>
    <template id="cpn">
        <div>
            <button v-for="item in categories" @click="btnClick(item)">
                {{item.name}}
            </button>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>

        const cpn = {
            template: "#cpn",
            data() {
                return {
                    categories: [
                        {id: '1', name: '约毛线'},
                        {id: '2', name: '杨美霞'},
                        {id: '3', name: '杨美霞'},
                        {id: '4', name: '杨美霞'},
                    ],
                }
            },
            methods: {
                btnClick(item) {
                    //向父组件发射自定义事件
                    this.$emit('itemclick', item);
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn
            },
            methods: {
                cpnClick(item) {
                    console.log('cpnClick', item);
                }
            }
        })
    </script>
</html>